<script setup>
import {ref,onMounted,defineProps} from "vue"

const props = defineProps({
    name:{type:String}
})

const lang = "```vue"

//"script"的判断
const scriptReg = /^\script/
const script_name = ref("script")
//"\n"的判断
const huanhangReg = /^\n/
const huanhang_name = ref("\n")

const codeName = ref("")

onMounted(()=>{
    console.log(scriptReg.test(script_name.value))
    // console.log(props.name)
    console.log(props.name.substring(lang.length,props.name.length - 3))
    codeName.value = props.name.substring(lang.length,props.name.length - 3)

    if(scriptReg.test()){
        
    }
})


</script>

<template>
    <div class="all">
        <pre>
            <code class="prism">
                {{ codeName }}
            </code>
        </pre>
    </div>
</template>

<style scoped>
.all{
    position: relative;
    width: 100%;
    height: 100%;
    background: #282c34;
    border-radius: 10px;
}
.all::before{
    position: absolute;
    top: .8em;
    right: 1em;
    content: "vue";
    color: rgba(200, 200, 200, .5);
}

/*  */
.prism{
    color: #abb2bf;
    background: #282c34;
}
code{
    white-space: pre-line;
}
</style>